<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>Bootstrap 101 Template</title>
    <meta content="学习案列" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">
    <!--360浏览器默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>





<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active">
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./getting-start.html">起步</a>
                </li>
                <li>
                    <a href="#">脚手架</a>
                </li>
                <li>
                    <a href="#">基本css样式</a>
                </li>
                <li>
                    <a href="#">组件</a>
                </li>
                <li>
                    <a href="#">JavaScrip插件</a>
                </li>
                <li>
                    <a href="#">定制</a>
                </li>
                <li>
                    <a href="#">网页实例</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!--页头-->
<header class="text-center">
    <div class="container" style="text-aligh:center;">
        <h1 style="margin-top:137px;font-size: 120px">Bootstrap</h1>
        <h2 style="margin-top:60px">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        <p>
            <a href="#">
                <button class="btn btn-large btn-primary" type="button">下载Bootstrap</button>
            </a>
        </p>
        <div class="container">
        <a style="margin-right:20px" href="#">GitHup projoct</a>
        <a style="margin-right:20px" href="#">案列</a>
        <a style="margin-right:20px" href="#">扩展</a>
        Version2.3 .2
    </div>
    </div>
    <div>
        <p style="margin-top:80px">
            <a href="#">
                Bootstrap V3中文文档
            </a>
        </p>
    </div>
</header>
<!--正文-->
<article class="text-center" style="margin-top: 80px">
    <div class="container">
        <div class="row">
            <div class="span12">
                <h1>Bootstrap介绍。</h1>
                <p style="">需要为爱上Bootstrap找N多理由吗？ 就在眼前。</p>
            </div>
            <div class="span4">
                <img src="./img/1.png" alt=""/>
                <h3>人人为我，我为人人。</h3>
                <p>由
                    <a href="#">@mdo</a>和<a href="#">@fat</a>在Twitter工作时创建，Bootstrap使用</a>和<a href="#">LESS CSS</a>并用<a href="#">Node</a>编译，托管在<a href="#"> GitHub</a>上，方便大家使用这一框架构建更好的web应用。
                </p>
            </div>
            <div class="span4">
                <img src="./img/2.png" alt=""/>
                <h3>任何人都可以使用。</h3>
                <p>Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。<a href="#">响应式CSS</a>可以使用。
                </p>

            </div>
            <div class="span4">
                <img src="./img/3.png" alt=""/>
                <h3>丰富的特色。</h3>
                <p>12列的响应式<a href="#">栅格结构</a>、丰富的组件、<a href="#">JavaScript插件</a>JavaScript插件、排版、表单控件，<a href="#">基于web的定制工具</a>。

            </div>
            <div class="row">
                <div class="span12 text-center">
                    <h1  style="margin-top:80px">基于Bootstrap构建的网站。</h1>
                    <p>更多基于Bootstrap构建的网站列表，<a href="#">优站精选 </a><a href="#">看看下面的几个案例</a>。
                    </p>
                </div>
                <div class="row">
                    <div class="span3">
                        <a href="#"><img src="./img/4.jpg" alt=""/></a>
                    </div>
                    <div class="span3">
                        <a href="#"><img src="./img/5.jpg" alt=""/></a>
                    </div>
                    <div class="span3">
                        <a href="#"><img src="./img/6.jpg" alt=""/></a>
                    </div>
                    <div class="span3">
                        <a href="#"><img src="./img/7.jpg" alt=""/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<!--页脚-->
<footer class="text-center" style="margin-top:80px;border-top:1px solid #e5e5e5;background-color: #f5f5f5;">
    <div class="container" style="margin-top: 2%;margin-bottom: 2%;">
        <p>Designed and built with all the love in the world by <a href="">@mdo</a> and <a href="">@fat</a>.</p>
        <p>Code licensed under <a href="">Apache License v2.0</a>, documentation under <a href="">CC BY 3.0</a>.</p>
        <p><a href="">Glyphicons Free</a>Glyphicons Free licensed under <a href="">CC BY 3.0</a></p>
        <p>
            <a href="">Blog ·</a>
            <a href="">  Issues ·</a>
            <a href="">  Changelog</a>
        </p>
    </div>
</footer>
</body>
</html>